<!-- Ring -->
<template>
  <canvas :id="canvasId" width="130" height="130"></canvas>
</template>

<script>
export default {
  name: 'Ring',
  components: {},
  data () {
    return {
    }
  },
  computed: {},
  props: {
    percentage: {
      // 10.00 0.12 例如
      type: Number,
      default: 0
    },
    canvasId: {
      required: true,
      type: String,
      default: 'circle'
    },
    bgColor: {
      type: String,
      default: '#E2E9FC'
    },
    circleBgColor: {
      type: String,
      default: 'rgba(64, 158, 255, 1)'
    },
    fontColor: {
      type: String,
      default: '#545F6A'
    }
  },
  mounted () {
    this.draws()
  },
  watch: {
    'percentage': function (val) {
      this.draws()
    }
  },
  methods: {
    draws () {
      var canvasId = this.canvasId || 'circle'
      var circleBackgroundColor = this.bgColor
      var bgColor = this.circleBgColor
      var fontColor = this.fontColor
      var deg = 360 * (this.percentage / 100)
      var fontText = this.percentage.toString() + '%'

      var options = {
        deg: deg, // 占比度数
        startAngle: -90, // 起始角度 （3点钟方向为0 顺时针）
        fontText: fontText,
        fontSize: '45px Microsoft YaHei',
        fontColor: fontColor,
        lineWidth: 40, // 圆环的宽度
        width: 70,
        height: 70,
        circleBackgroundColor: circleBackgroundColor,
        startColor: bgColor,
        endColor: bgColor
      }

      createCircle(options)

      function createCircle (options) {
        var canvas = document.getElementById(canvasId)
        var ctx = canvas.getContext('2d')

        // 屏幕的设备像素比
        var devicePixelRatio = window.devicePixelRatio || 1
        if (devicePixelRatio !== 2) {
          devicePixelRatio = 2
        }
        // 浏览器在渲染canvas之前存储画布信息的像素比
        var backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
          ctx.mozBackingStorePixelRatio ||
          ctx.msBackingStorePixelRatio ||
          ctx.oBackingStorePixelRatio ||
          ctx.backingStorePixelRatio || 1
        // canvas的实际渲染倍率
        var ratio = devicePixelRatio / backingStoreRatio

        // canvas.style.width = options.width + 'rem';
        // canvas.style.height = options.height + 'rem';

        canvas.style.width = options.width + 'px'
        canvas.style.height = options.height + 'px'

        canvas.width = canvas.width * ratio
        canvas.height = canvas.height * ratio
        ctx.setTransform(1, 0, 0, 1, 0, 0)

        var width = canvas.width
        var height = canvas.height

        // 绘制文字
        ctx.font = options.fontSize
        ctx.fillStyle = options.fontColor
        var ratioStr = options.fontText
        var text = ctx.measureText(ratioStr)
        ctx.fillText(ratioStr, ((width / 2 * ratio) - text.width) / 2, (height / 2 + options.lineWidth / 4)) /* 底下的灰圆环 */

        // 1.绘制底边圆
        var circleObj = {
          ctx: ctx,
          x: width / 2,
          y: height / 2,
          radius: width / 2 - options.lineWidth / 2,
          lineWidth: options.lineWidth
        }
        circleObj.startAngle = 0 * Math.PI / 180
        circleObj.endAngle = 360 * Math.PI / 180
        circleObj.color = options.circleBackgroundColor
        drawCircle(circleObj)

        // 2.绘制带颜色的圆
        var circleObj2 = {
          ctx: ctx,
          x: width / 2,
          y: height / 2,
          radius: width / 2 - options.lineWidth / 2,
          lineWidth: options.lineWidth
        }

        circleObj2.startAngle = (0 + options.startAngle) * Math.PI / 180
        circleObj2.endAngle = (options.startAngle + options.deg) * Math.PI / 180

        // 渐变色处理
        var r = circleObj2.radius

        // var r = circleObj2.radius

        var myGradient
        if (options.deg < 135) {
          myGradient = ctx.createLinearGradient(r, r, r / 2, r / 2)
        } else {
          myGradient = ctx.createLinearGradient(r / 2, r / 2, r / 2 * 3, r / 2)
        }
        myGradient.addColorStop(0, options.startColor)
        myGradient.addColorStop(1, options.endColor)
        circleObj2.color = myGradient

        drawCircle(circleObj2)

        function drawCircle (circleObj) {
          var ctx = circleObj.ctx
          ctx.beginPath()
          ctx.arc(circleObj.x, circleObj.y, circleObj.radius, circleObj.startAngle, circleObj.endAngle, false)
          ctx.lineWidth = circleObj.lineWidth
          ctx.strokeStyle = circleObj.color
          // ctx.lineCap = 'round'
          ctx.stroke()
          ctx.closePath()
        }
      }
    }
  }
}

</script>
